

<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:im用户列表
@author:成都市一颗优雅草科技有限公司     
@version V3.7 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->


<template>
	<view
		style="background-image: url(../../static/im/imbj_2.png);
	 background-size:cover;
	 background-repeat:no-repeat;
		width: 100%;
		height: 100%;
		color: #FFFFFF;"
	>
		<view class="head shadow">
			<view class="return" @click="back"><image src="../../static/img/im/im-chat-h1.png" mode="widthFix"></image></view>
			<view class="title_wrap"><text class="uni-title">会话</text></view>
			<view @click="showDialog1" class="seach" style="margin-right: 20rpx;"><image src="../../static/img/im/addFriend.png"></image></view>
		</view>
		<!-- 通用搜索 -->
		<!-- <view class="common-search-form">
			<view class="input-view">
				<uni-icons type="search" size="18" color="#999" style="margin-left: 20rpx;" />
				<input confirm-type="search" class="input" type="text" placeholder="请输入关键词" placeholder-style="color:#999;font-size:26rpx;" />
			</view>
		</view> -->
		<!-- 聊天列表 -->
		<view class="chat-list uni-padding-wrap">
			<scroll-view class="scroll-view" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" @scrolltoupper="upper" @scrolltolower="lower">
				<view class="scroll-do" v-for="(item, index) in lists" :options="options2" :key="index" @click="bindClick($event, index)">
					<view class="uni-flex uni-row items" @tap.stop="chatDetail(index)">
						<view class="flex-item image">
							<image class="img" :src="item.head_img" mode="aspectFill"></image>
							<view class="badge" v-if="item.target.isNoDisturb == false && item.unreadCount != ''">{{ item.unreadCount }}</view>
						</view>
						<view class="flex-item contents">
							<view class="title">
								{{ item.title }}
								<text>{{ item.lastMessageTime }}</text>
							</view>
							<view class="text-small">{{ item.lastMessageText }}</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- <navigator url="../friend-invitiaon/friend-invitiaon">
				<uni-list-item title="好友通知" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" :badge-text="String(newFriendInvitiaon)"
				 :show-badge="newFriendInvitiaon?true:false" />
			</navigator> -->
			<!-- <uni-swipe-action>
				<uni-swipe-action-item class="scroll-do" v-for="(item,index) in lists" :key="index" :options="options2" @click="bindClick(item)">
				<view class="uni-flex uni-row items" @tap.stop="chatDetail(index)">
					<view class="flex-item image">
						<image class="img" :src="item.avatar" mode="aspectFill"></image>
						<view class="badge" v-if="item.target.isNoDisturb == false && item.unreadCount != ''">{{item.unreadCount}}</view>
					</view>
					<view class="flex-item contents">
						<view class="title">
							{{item.title}}
							<text>{{item.lastMessageTime}}</text>
						</view>
						<view class="text-small">{{item.lastMessageText}}</view>
					</view>
				</view>
				</uni-swipe-action-item>
			</uni-swipe-action> -->
		</view>
		<uni-dialog title="添加好友" :show="show1" v-on:closeDialog="closeDialog1">
			<view slot="content">
				<view class="dialog-content1">
					<!-- <input class="uni-input" type="text" :value="friendUsername" placeholder="请输入用户帐号" /> -->
					<input  type="text" v-model="username" style="color:#666666" placeholder="请输入用户帐号" />
					<!-- <input class="uni-input"  type="text"  v-model="friendReason" placeholder="请输入原因" /> -->
				</view>
			</view> 
			<view slot="btns">
				<view class="dialog-btns">
					<view>
						<!-- <button type="primary" @tap="closeDialog1">关闭</button> -->
						<button type="primary" @tap="confirm1" formType="submit" style="color:#3688FF;">搜索</button>
					</view>
				</view>
			</view>
		</uni-dialog>
	</view>
</template>

<script>
import uniDialog from '@/components/im-chat/uni-dialog.vue';
import { mapState, mapMutations } from 'vuex';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniBadge from '@/components/uni-badge/uni-badge.vue';
import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue';
var _self;
export default {
	components: {
		uniIcons,
		uniBadge,
		uniListItem,
		uniSwipeAction,
		uniSwipeActionItem,
		uniDialog
	},
	computed: {
		...mapState(['hasLogin', 'loginProvider', 'nickname', 'avatar', 'receiveMessage', 'newFriendInvitiaon'])
	},
	data() {
		return {
			username:'',
			info: {},
			chatUserAvatar: '',
			show1: false,
			friendReason: '交个朋友吧!',
			lists: [],
			options2: [
				{
					text: '删除',
					style: {
						backgroundColor: '#FF3A30'
					}
				}
			]
		};
	},
	onShow() {
		_self = this;
		this.getList();
	},
	onLoad() {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
	},
	onReady: function() {
		uni.hideLoading();
	},
	onPullDownRefresh() {
		// 下拉刷新
		this.getList();
	},
	watch: {
		receiveMessage(res) {
			console.log('监听到新消息，更新列表');
			this.getList();
		}
	},
	methods: {
		showDialog1: function(index) {
			// uni.navigateTo({
			// 	url: '/pages/friend-invitiaon/friend-invitiaon',
			// });
			this.show1 = true;
		},
		closeDialog1: function() {
			this.show1 = false;
		},
		back(){
			// 返回
			uni.navigateBack({
				delta: 1
			});
		},
		confirm1() {
			console.log('========addUsers========');
			console.log(this.username);
			if(!this.username){
				uni.showToast({
					title: '请正确填写账号!',
					icon: 'none'
				});
				return;
			}  
			uni.hideKeyboard();
			this.closeDialog1(); 
			uni.navigateTo({
				url: './im-user?title=' + this.username + "&fromUser=" + this.username
			});
			/* 
			// 添加好友调接口
			let params = {
				username: this.friendUsername,
				reason: this.friendReason?this.friendReason:"交个朋友吧!"
			};
			console.log(params);
			uni.showLoading();
			// #ifdef APP-PLUS
			this.jpushIM.sendInvitationRequest(params, res => {
				uni.hideLoading();
				console.log(res);
				if (res.errorCode == 0) {
					uni.showToast({
						title: '发送成功',
						icon: 'none'
					});
					this.closeDialog1(); // 关闭dialog
				} else {
					uni.showModal({
						title: '操作失败',
						content: '原因：' + res.errorMsg,
						showCancel: false,
						cancelText: '',
						confirmText: '关闭'
					});
				}
			});
			// #endif
			 */
		},
		bindClick(e, index) {
			let item = this.lists[index];
			// 删除会话
			var params = {
				type: item.conversationType
			};
			if (item.conversationType == 'group') {
				params.groupId = item.target.id; // 删除群组
			} else if (item.conversationType == 'single') {
				params.username = item.target.username; // 删除会话
			}
			// uni.showModal({
			// 	title: '链接',
			// 	content: item.conversationType + JSON.stringify(params),
			// 	showCancel: false,
			// 	cancelText: '',
			// 	confirmText: '关闭'
			// });
			this.jpushIM.deleteConversation(params, res => {
				if (res.errorCode == 0) {
					this.getList();
				} else {
					uni.showModal({
						title: '删除失败',
						content: '原因：' + res.errorMsg,
						showCancel: false,
						cancelText: '',
						confirmText: '关闭'
					});
				}
			});
		},
		// 从本地数据库中获取会话列表，默认按照会话的最后一条消息的时间，降序排列
		getList: function() {
			uni.stopPullDownRefresh();

			// #ifdef APP-PLUS
			this.jpushIM.getConversations(callback => {
				// uni.showModal({
				// 	title: '提示',
				// 	content: "如果getConversations未弹出，是由于apk未更新，请多打包几次",
				// 	showCancel: false,
				// 	cancelText: '',
				// 	confirmText: '关闭'
				// });
				var list = this.setList(callback);
				for (let i = 0; i < list.length; i++) {
					// console.log(list[i]);
					list[i].head_img = '';
					list[i].head_img = JSON.parse(list[i].target.extras).head_img ? JSON.parse(list[i].target.extras).head_img : list[i].avatar;
				}
				this.lists = list;
			});
			// #endif

			// #ifdef H5
			// 在H5下模拟数据用于调试页面显示样式，这段mock可以删除
			var list = this.setList(mock.imList);
			this.lists = list;
			// #endif
		},
		setList: function(items) {
			var newItems = [];
			items.forEach(e => {
				if (e) {
					if (e.latestMessage) {
						if (e.latestMessage.messageType == 'image') {
							e.lastMessageText = '[图片]';
						} else if (e.latestMessage.messageType == 'voice') {
							e.lastMessageText = '[语音]';
						} else {
							e.lastMessageText = e.latestMessage.messageString;
						}
						e.lastMessageTime = this.imUtils.formatDateTime(e.latestMessage.createTime, 'str');
					} else {
						e.lastMessageText = '';
						e.lastMessageTime = '';
					}
					if (e.conversationType == 'single') {
						// 单聊会话
						e.avatar = e.target.avatar ? e.target.avatar : '../../static/img/im/chat_icon.png';
					} else if (e.conversationType == 'group') {
						// 群聊会话
						e.avatar = '../../static/img/im/chat_icon_group.jpg';
					}
					newItems.push(e);
				}
			});
			return newItems;
		},
		chatDetail(index) {
			let item = this.lists[index];

			if (item.conversationType == 'single') {
				// 单聊会话
				let title = item.target.nickname ? item.target.nickname : item.target.username;
				uni.navigateTo({
					url: 'im-chat?title=' + title + '&fromUser=' + item.target.username
				});
			} else if (item.conversationType == 'group') {
				// 群聊会话
				uni.navigateTo({
					url: './im-chat-group?groupId=' + item.target.id + '&title=' + item.target.name
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: rgba(255, 255, 255, 0.1);
}

.head {
	position: relative;
	//#ifdef APP-PLUS
	padding-top: var(--status-bar-height);
	//#endif
	z-index: 1;
	left: 0;
	right: 0;
	background-color: rgba(255, 255, 255, 0.1);
	width: 100%;
	display: flex;
	flex-direction: row;
	height: 88rpx;
}

.shadow {
	box-shadow: 0 1px 6px rgba(255, 255, 255, 0.1);
}

.return{
	flex: 1;
	display: flex;
	flex-direction: row;
	position: relative;
	left: 0rpx;
	justify-content: flex-end;
	align-items: center;
	image {
		display: inline-block;
		width: 32rpx;
		height: 21rpx;
		margin-left: 21rpx;
	}
}

.title_wrap {
	flex: 11;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.uni-title {
	margin-left: 30rpx;
}

.seach {
	flex: 1;
	display: flex;
	flex-direction: row;
	position: relative;
	right: 0rpx;
	justify-content: flex-end;
	align-items: center;
	image {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		margin-right: 5rpx;
	}
}

.chat-list {
	// margin: 20rpx 0;
	// background-color: rgba(255,255,255,0.1);
	// padding-bottom: 50px;
}

.scroll-do .items {
	padding: 20rpx 10rpx;
	// background-color: rgba(255,255,255,0.1);
	border-bottom: 1px solid rgba(221, 221, 221, 0.4);
	// &:first-child{
	// 	border-radius:10rpx 10rpx 0 0;
	// }
	// &:last-child{
	// 	border-bottom: 1px solid rgba(221, 221, 221, 0);
	// 	border-radius: 0 0 10rpx 10rpx;
	// }
}

.scroll-do .items > .image {
	width: 90rpx;
	height: 90rpx;
	margin-right: 30rpx;
	font-size: 0;
	position: relative;
}

.scroll-do .items > .image .img,
.scroll-do .items > .image image {
	width: 90rpx;
	height: 90rpx;
	border-radius: 90rpx;
}

.scroll-do .items > .contents {
	margin-right: 30rpx;
	-webkit-flex: 1;
	flex: 1;
}

.scroll-do .items > .contents > .title {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	font-size: 28rpx;
	color: #e8e8e8;
}

.scroll-do .items > .contents > .title > text {
	color: #999;
	font-size: 22rpx;
}

.scroll-do .items > .contents > view {
	line-height: 1.8em !important;
}

.scroll-do .btn {
	background: #ff3a30;
	color: #fff;
	width: 130rpx;
	height: 130rpx;
	line-height: 130rpx;
	justify-content: center;
	text-align: center;
	margin: 0;
	overflow: hidden;
	display: inline-flex;
}

.scroll-do .btn-first {
	background: #3688ff;
}

.scroll-do .badge {
	border-radius: 30rpx;
	width: 30rpx;
	height: 30rpx;
	padding: 0;
	line-height: 30rpx;
	text-align: center;
	font-size: 16rpx;
	background: #ff0036;
	position: absolute;
	right: 0;
	top: 2px;
	z-index: 1;
	background: #ff0036;
	color: #ffffff;
}

.scroll-do .text-small {
	// width: 560rpx;
	color: #a8a8a8;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 模态对话框 */
	.dialog-btns {
		display: flex;
		width: 100%;
		padding: 10px 0;
		flex-wrap: nowrap;
	}
	
	.dialog-btns view {
		width: 100%;
		border-right: 1px solid #F5F6F8;
	}
	
	.dialog-btns view:last-child {
		border: 0;
	}
	
	.dialog-btns button {
		width: 100%;
		padding: 0;
		text-align: center;
		background: none;
		border: none;
		box-shadow: none;
		height: 25px;
		font-size: 14px;
		color: #888888;
		line-height: 25px;
		border-radius: 0;
	}
	
	.dialog-btns button:after {
		width: 0;
		height: 0;
		border: 0;
	}
	
	.dialog-btns .button-hover {
		background: none;
		color: #3688FF;
	}
	
	.dialog-content1 {
		text-align: center;
		padding: 15rpx;
		background: rgba(255,255,255,1);
		color: #000000;
	}
	
	.dialog-content1 .uni-input {
		margin-bottom: 15rpx;
	}
	
	.dialog-content1 .uni-textarea {
		padding: 15rpx;
		box-sizing: border-box;
	}
</style>
